<template>
  <div style="width: 100%;padding: 10px;">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line"></div>
            <span class="details_HeaderTitle">退货信息</span>
          </div>
          <div style="display: flex">
            <!-- <el-button type="primary" v-permission="['return.query']" v-show="form.shippingStatus == 1 || form.shippingStatus == 2" @click="logisticsClick">查看物流</el-button> -->
            <el-button type="primary" v-show="form.shippingStatus != 5 && supplierCode =='jd' "  v-permission="['return.received']" @click="receivedClick1">京东退货</el-button>
            <div v-if="supplierCode !='jd' ">
              <el-button type="primary" v-show="form.shippingStatus == 0 || form.shippingStatus == 1 || form.shippingStatus == 2" v-permission="['return.received']" @click="receivedClick">确认退货</el-button>
            </div>
            <el-button type="info" v-permission="['return.cancel']" v-show="form.shippingStatus == 1 || form.shippingStatus == 0" @click="cancelClick">关闭订单</el-button>

            <el-dropdown style="margin-left: 10px" split-button type="primary" v-permission="['return.print']" @click="printClick" @command="handleCommand">
              打印
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="printSetupClick">模版设置</el-dropdown-item>
                  <!-- <el-dropdown-item command="exportViewClick">导出</el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </div>
        </div>
        <div class="deleted_OrderHeader">
          <el-row :gutter="24">
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单编号：</span>
              <span class="deleted_OrderTitle">{{form.orderSn}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">退货单号：</span>
              <span class="deleted_OrderTitle">{{form.sn}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">退货状态：</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{form.statusDescr}}</span>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">退货日期：</span>
              <span class="deleted_OrderTitle">{{form.orderDate | dateFormatter}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">退货仓库：</span>
              <span class="deleted_OrderTitle">{{shopName}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">所属部门：</span>
              <span class="deleted_OrderTitle">{{officeName}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">开票类型：</span>
              <span class="deleted_OrderTitle">{{form.taxType | watchTaxType}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">配送方式：</span>
              <span class="deleted_OrderTitle">{{form.shippingMethod | watchShippingMethod}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">退货人员：</span>
              <span class="deleted_OrderTitle">{{adminName}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">买家留言：</span>
              <span class="deleted_OrderTitle">{{form.memo}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="details_PayHeader">
          <div class="deleted_Line"></div>
          <span class="details_HeaderTitle">买家信息</span>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">客户名称：</span>
                <span class="deleted_OrderName">{{memberName}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="24">
              <div class="details_Buyers">
                <span class="deleted_Row_Headings">收货信息：</span>
                <div>
                  <span class="deleted_OrderName">{{form.consignee}} {{form.phone}}</span>
                  <span class="deleted_OrderName" style="margin-top: 5px; width: 600px;">{{form.areaName}} {{form.address}}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="product_header_name" style="">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">商品明细</span>
        </div>
        <!--商品规格-->
        <el-table
          :data="form.itemList"
          border
          show-summary
          stripe
          style="width: 100%">
          <el-table-column
            label="排序"
            type="index"
            width="50"
            fixed
          >
          </el-table-column>
          <el-table-column label="商品图片" width="80">
            <template slot-scope="scope">
              <img :src="scope.row.thumbnail" style="width: 100%; height: 100%;">
            </template>
          </el-table-column>
          <el-table-column
            label="商品名">
            <template slot-scope="{row}">
              <span>{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="规格"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.spec}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="货号/条码"
            width="170"
          >
            <template slot-scope="{row}">
              <span>{{row.sn}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="单位"
            width="70"
            align="center"
          >
            <template slot-scope="{row}">
              <span>{{row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            prop="quantity"
            align="right"
            width="70">
          </el-table-column>
          <!-- <el-table-column
            label="单价"
            align="right"
            width="70">
            <template slot-scope="{row}">
              <span>{{row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="金额"
            width="70"
            align="right"
            prop="subTotal"
          >
          </el-table-column>
          <el-table-column
            label="优惠"
            width="70"
            align="right"
            prop="discount"
          >
          </el-table-column> -->
          <el-table-column
            label="物流单号"
            width="150"
            align="right"
          >
            <template slot-scope="{row}">
              <span>{{row.trackingNo}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="结算运费"
            width="80"
            align="right"
            prop="shippingFreight"
          >
          </el-table-column>
          <el-table-column
            label="结算货款"
            width="80"
            align="right"
            fixed="right"
            prop="cost"
          >
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="80">
            <template slot-scope="scope">
              <el-link type="primary" @click="logisticDetail(scope.row.trackingNo)">{{scope.row.trackingNo? '查看物流': ''}}</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="product_header_nameTwo">
          <div class="deleted_Line"/>
          <span style="margin: 10px 5px;">付款方式</span>
        </div>
        <div v-for="item in payments">
          <div class="deleted_OrderHeader">
            <el-row :gutter="24">
              <el-col :span="1">
                <span style="padding-left: 20px;">├</span>
              </el-col>
              <el-col :span="4">
                <span>{{ item.createDate | datetimeFormatter }}</span>
              </el-col>
              <el-col :span="4">
                <span>付款方式 :</span>
                <span>{{ item.paymentPluginName }}</span>
                <span style="margin-left:10px" class="submit_payMethod_Content_DateTwo" v-if="item.attach.quantity !=undefined && (item.paymentPluginId == 'waterTicketPayPlugin' || item.paymentPluginId == 'couponCodePayPlugin')">(抵扣{{item.attach.quantity}}张)</span>
              </el-col>
              <el-col :span="3">
                <span>付款金额 :</span>
                <span>{{ item.amount }}</span>
              </el-col>
              <el-col :span="3">
                <span style="color: rgb(64, 158, 255)">{{ item.status | watchPayment }}</span>
              </el-col>
              <el-col :span="9">
                <span>备注 : </span>
                <span>{{ item.memo }}</span>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="product_header_nameTwo">
          <div class="deleted_Line"/>
          <span style="margin: 10px 5px;">订单日志</span>
        </div>
        <div v-for="item in orderLog">
          <div class="deleted_OrderHeader">
            <el-row :gutter="20">
              <el-col :span="1">
                <span style="padding-left: 20px;">├</span>
              </el-col>
              <el-col :span="4">
                <span>{{ item.createDate | datetimeFormatter }}</span>
              </el-col>
              <el-col :span="19">
                <span>{{ item.content }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="派单"
      :visible.sync="confirmType"
      width="40%"
      v-el-drag-dialog
      append-to-body
      :before-close="confirmClose">
      <div style="position: relative;">
        <el-form ref="form" :label-position="labelPosition" :model="form" label-width="90px">
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="12">
              <el-form-item label="收货人：">
                <span>{{form.consignee}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话：">
                <span>{{form.phone}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="24">
              <el-form-item label="收货地址：">
                <span>{{form.address}}{{form.areaName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="shippingMethod == 2" :gutter="24" class="deleted_OrderContent">
            <el-col :span="12">
              <el-form-item label="供应商">
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in supplierList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="送货员">
                <el-select v-model="value1" placeholder="请选择">
                  <el-option
                    v-for="item in memberList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="display: flex;justify-content: flex-end;align-items: center;margin-top: 30px">
          <el-button type="primary" @click="memberSave">派单</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="发货"
      :visible.sync="shippingType"
      width="40%"
      v-el-drag-dialog
      append-to-body
      :before-close="shippingClose">
      <div style="position: relative;">
        <el-form ref="form" :label-position="labelPosition" :model="form" label-width="90px">
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="12">
              <el-form-item label="收货人：">
                <span>{{form.consignee}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话：">
                <span>{{form.phone}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="24">
              <el-form-item label="收货地址：">
                <span>{{form.address}}{{form.areaName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="shippingMethod ==0" :gutter="24" class="deleted_OrderContent">
            <el-col :span="12">
              <el-form-item label="运单号">
                <el-input placeholder="请输入运单号" v-model="trackingNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="display: flex;justify-content: flex-end;align-items: center;margin-top: 30px">
          <el-button type="primary" @click="shippingSave">发货</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="物流信息" width="60%" :visible.sync="logisticsVisible">
      <div class="el-dialog-div">
        <el-table :data="logisticsData" border>
          <el-table-column label="物流单号" width="140">
            <template slot-scope="scope">{{scope.row.trackingNo}}</template>
          </el-table-column>
          <el-table-column label="商品图片" width="80">
            <template slot-scope="scope">
              <img :src="scope.row.thumbnail" style="width: 100%; height: 100%;">
            </template>
          </el-table-column>
          <el-table-column label="商品名称">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
                <span>{{ scope.row.name }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="商品规格">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.spec" placement="top">
                <span>{{ scope.row.spec }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="80">
            <template slot-scope="scope">
              <el-link type="primary" @click="logisticDetail(scope.row.trackingNo)">{{scope.row.trackingNo? '查看物流': ''}}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      title="打印安装教程"
      :visible.sync="isNoInstall"
      width="600px"
      v-el-drag-dialog
      append-to-body
      :before-close="installClose">
      <div style="position: relative;height: 30vh;overflow: auto">
        <div>
          <span style="font-weight: bold">未检测到您的打印控件，请检查是否安装以下两个打印控件</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">1、install_lodop64.exe（或者32位，根据自己的电脑位数）</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">2、CLodopPrint_Setup_for_Win32NT.exe（32位64位皆可用）</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">3、苹果系统暂时无法支持</span>
          <span style="font-weight: bold">已经下载</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">如果已有两个软件，请检查是否已经打开服务。</span>
          <span style="font-weight: bold">未下载</span>
          <span style="display: block;margin-left: 20px;line-height: 20px">如果没有两个控件的客户，您可以点击下面的下载地址自行前往下载<a style="color: #00B6FB;margin-left: 20px" target="view_window" href="http://www.c-lodop.com/download.html">下载地址</a></span>
          <span style="display: block;margin-left: 20px;line-height: 20px">(提示：请下载Lodop发型包Windows版，里面包含所需的两个控件，安装完后请刷新本页面方可使用打印，install_lodop64.exe软件下载完打开即可，
                CLodopPrint_Setup_for_Win32NT.exe需要安装，您可以直接选择开机自动启动)</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="快递动态" width="60%" :visible.sync="logisticsDetailVisible">
      <div class="el-dialog-div">
        <el-table :data="logisticsDetailData">
          <el-table-column prop="ftime" label="时间" width="170"></el-table-column>
          <el-table-column label="快递动态">
            <template slot-scope="scope">
              <span :style="{'color': scope.$index===0? '#409EFF': ''}">{{scope.row.context}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <orderPrintTwo @isTeach="isTeach" v-if="isPrintShow==true" :shopName="shopName" :form="form" printName="returns_10200_0" :sendForm="sendForm" :officeName="officeName" ref="orderPrintTwo"></orderPrintTwo>
  </div>
</template>

<script>
  import orderPrintTwo from '@/components/OrderPrint/orderPrintTwo'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {EventBus} from '@/api/eventBus'
  import {received,find,cancel } from '../../api/return'
  import utils from '../../utils/utils.js'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import Distpicker from '@/components/Distpicker/Distpicker'
  import {list as supplier} from '@/api/supplier'
  import {list as member} from '@/api/member'
  import { trackingNo_query, delivery_query } from '@/api/shipping'
  import { returns } from '@/api/jdShipping'


  import { mapGetters } from 'vuex'

  export default {
    naem: 'returns-view',
    directives: {elDragDialog,permission},
    data() {
      return {
        supplierCode:'',
        form: {
          id: '',
        },
        adminName:'',
        shopName:'',
        memberName: '',
        isNoInstall:false,
        officeName: '',
        operatorName: '',
        memoName:'买家',
        signName:'收货人',
        isPrintShow:false,
        title:'退货',
        shippingStatus: 0,
        confirmType: false,
        shippingType: false,
        trackingNo: '',
        value: '',
        sendForm:'',
        supplierList: [],
        memberList: [],
        value1: '',
        labelPosition:'left',
        shippingMethod:0,
        pageNum: 1,
        pageSize: 20,
        logisticsData: [], //物流信息
        logisticsDetailData: [], //物流详情
        logisticsVisible: false,
        logisticsDetailVisible: false,
        payments:[],
        orderLog:[]
      }
    },
    filters: {
      watchStatus(val) {
        if (val == 0) {
          return '未确认'
        } else if (val == 1) {
          return '已确认'
        } else if (val == 2) {
          return '已发货'
        } else if (val == 3) {
          return '已送达'
        } else if (val == 4) {
          return '已完成'
        }else if (val == 5) {
          return '已关闭'
        }
      },
      watchTaxType(val) {
        if (val == 0) {
          return '不开票'
        } else if (val == 1) {
          return '增票'
        } else if (val == 2) {
          return '普票'
        }
      },
      watchShippingMethod(val) {
        if (val == 0) {
          return '普通快递'
        } else if (val == 1) {
          return '到店提货'
        } else if (val == 2) {
          return '同城快送'
        }
      }
    },
    computed: {
      ...mapGetters([
        'token'
      ])
    },
    created() {
      var _this = this;
      _this.form.id = this.$route.query.id;
      _this.findClick()
    },
    components: {Distpicker,orderPrintTwo},
    methods: {
      installClose(){
        this.isNoInstall=false
      },
      findClick() {
        var _this = this
        find(this.form.id).then(response => {
          console.log(response);
          if(response.data.return.supplierCode != null && response.data.return.supplierCode !=undefined){
            this.supplierCode = response.data.return.supplierCode
          }
          this.sendForm=response.data
          this.adminName=response.data.adminName
          this.officeName=response.data.officeName
          this.shopName=response.data.shopName
          _this.form = response.data.return;
          _this.shippingStatus = response.data.shippingStatus;
          _this.memberName = response.data.memberName;
          // _this.operatorName = response.data.operatorName;

          _this.shippingMethod = response.data.shippingMethod;
          response.data.payments.forEach(item=>{
            if(item.attach != ''){
             item.attach=JSON.parse(item.attach)
            }
          })
          _this.payments = response.data.payments
          _this.orderLog = response.data.orderLog
        }).catch(error => {
        })
      },
      logisticsClick () { // 查看物流
        let params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        params.append('orderId', this.form.orderId)
        trackingNo_query(params).then(res => {
          console.log(res)
          this.logisticsData = res.data.data
          this.logisticsVisible = true
        }).catch(err => {
          console.log(err)
        })
      },
      logisticDetail (trackingNo) {
        this.logisticsDetailData = []
        delivery_query({trackingNo}).then(res => {
          console.log(res)
          this.logisticsDetailData = res.data.data
          this.logisticsVisible = false
          this.logisticsDetailVisible = true
        }).catch(err => {
          console.log(err)
        })
      },
      cancelClick(){
        this.$confirm('确认关闭订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancel(this.form.id).then(res=>{
            this.$message({
              message: res.content,
              offset: 120,
              center: true
            });
            this.findClick()
            EventBus.$emit('returns-view', res.data)
          }).catch(error => {
            console.log(error)
          })
        }).catch(err=>{

        })

      },
      completeClick() {
        complete(this.form.id).then(response => {
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          this.findClick()
        }).catch(error => {
        })
      },
      disCompleteClick() {
        disComplete(this.form.id).then(response => {
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          this.findClick()
        }).catch(error => {
        })
      },
      receivedClick1() {
        this.$confirm('确认收到退货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            returnId:this.form.id
          }
          returns(params).then(response => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
            this.findClick()
            EventBus.$emit('returns-view', response.data)
          }).catch(error => {
            console.log(error)
          })
        }).catch(err=>{
          console.log(err)
        })
      },
      receivedClick() {
        this.$confirm('确认收到退货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          received(this.form.id).then(response => {
            this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
            this.findClick()
            EventBus.$emit('returns-view', response.data)
          }).catch(error => {
            console.log(error)
          })
        }).catch(err=>{
          console.log(err)
        })
      },
      disConfirmClick() {
        disConfirm(this.form.id).then(response => {
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          this.findClick()
        }).catch(error => {
        })
      },
      shippingClick() {

      },
      shippingClose() {
        this.shippingType = false
      },
      shippingSave() {
        var _this = this
        let params = new URLSearchParams();
        params.append('trackingNo', _this.trackingNo);
        received(this.form.id).then(response => {
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          _this.findClick()
          _this.shippingType = false
        }).catch(error => {
        })
      },
      confirmClick() {
        this.confirmType = true
        this.loadSupplier()
        this.loadMember()
      },
      confirmClose() {
        this.confirmType = false
      },
      loadSupplier() {
        let params = new URLSearchParams();
        supplier(params).then(response => {
          console.log(response)
          this.supplierList = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      loadMember() {
        let params = new URLSearchParams();
        member(params).then(response => {
          console.log(response)
          this.memberList = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      memberSave() {
        console.log(this.value)
        console.log(this.value1)
        var _this = this
        let params = new URLSearchParams();
        params.append('trackingNo', _this.trackingNo);
        confirm(this.form.id).then(response => {
          this.$message({
            message: response.content,
            offset: 120,
            center: true
          });
          _this.findClick()
          _this.confirmType = false
        }).catch(error => {
        })
      },
      isTeach(data){
        this.isNoInstall=data
      },
      printClick() {
        this.isPrintShow=true
        setTimeout(()=>{
          this.$refs.orderPrintTwo.printPdf()
        },1000)
        //  this.pdfUrl = process.env.VUE_APP_BASE_API + '/admin/order/print/' + this.form.id + '?token=' + this.token
        // window.open(this.pdfUrl)
      },
      printSetupClick(){
        this.isPrintShow=true
        setTimeout(()=>{
          this.$refs.orderPrintTwo.printSetUp()
        },1000)
      },
      exportViewClick(){
        this.exportView=process.env.VUE_APP_BASE_API + '/admin/return/export/'+this.form.id+'?token='+this.token
        window.open(this.exportView)
      },
      handleCommand(command){
        if (command == 'printSetupClick'){
          this.printSetupClick()
        }else {
          this.exportViewClick()
        }
      }
    },
  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 100px;
  }

  .deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  .deleted_OrderTitle {
  }

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_Row_Headings {
    color: #666666;
  }

  .deleted_OrderName {
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px #409EFF solid;
    margin-bottom: 20px;
    background-color: #f2f2f2;
    margin-top: 20px;
  }
  /deep/.el-form-item{
    margin-bottom: 0px;
  }
  /deep/.el-dialog__body{
    padding-top: 0px;
  }
  .el-dialog-div {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .product_header_nameTwo{
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    font-weight: 600;
  }
  .submit_payMethod_Content_DateTwo {
      font-size: 12px;
      font-weight: 400;
      color: rgba(26, 26, 30, 0.3);
      line-height: 36px;
      /* display: block; */
      /* margin-top: 10rpx; */
    }
</style>
